import { Dayjs } from "dayjs";
import { fetchList } from "../..";
import { userPowerMap } from "../../dict";
import {
  clickPointType,
  defaultModalFormState,
  defaultModalLoading,
  defaultModalVisible,
  drawerFormState,
  operateType,
  publish_time,
  randomClassName,
  refreshComponent,
} from "../../store";
import { handleInput } from "../../utils";
export default () => {
  const modal_disable_ok_button = computed(() => {
    return (
      isEmptyType(defaultModalFormState[1].content) ||
      isEmptyType(defaultModalFormState[1].location) ||
      isEmptyType(defaultModalFormState[1].auth) ||
      isEmptyType(publish_time.value)
    );
  });
  const disabled = computed(
    () =>
      defaultModalFormState[1].images.length >= 9 ||
      drawerFormState.images.length >= 9
  );
  const defineModalConfig = {
    zIndex: 1002,
    maskClosable: true,
    okText: ref($t("base.save")),
    modalInstance: ref(null),
    loading: defaultModalLoading[1],
    visible: defaultModalVisible[1],
    title: ref($t("base.postTrends")),
    disable_ok_button: modal_disable_ok_button,
    formState: defaultModalFormState[1],
    on: {
      async finish(values: any) {
        const loading = defaultModalLoading[1];
        try {
          loading.value = true;
          defaultModalFormState[1].uid = drawerFormState.uid;
          if (operateType.value === "view") {
            const created_at =
              defaultModalFormState[1].created_at ||
              publish_time.value.format("YYYY-MM-DD HH:mm:ss");
            const res: any = await userApi.updateDynamic({
              editId: defaultModalFormState[1].uid,
              images: defaultModalFormState[1].images.map(
                (item: any) => item.url
              ),
              video: defaultModalFormState[1].video,
              videoFileid: defaultModalFormState[1].videoFileid,
              auth: defaultModalFormState[1].auth,
              location: defaultModalFormState[1].location,
              content: defaultModalFormState[1].content,
              content_position_country_code:
                defaultModalFormState[1].content_position_country_code,
              created_at,
            });
            if (res.code != 200) return message.error(res.message);
            drawerFormState.dynamics = [
              {
                id: defaultModalFormState[1].uid,
                auth: defaultModalFormState[1].auth,
                content: defaultModalFormState[1].content,
                location: defaultModalFormState[1].location,
                created_at,
                picture: defaultModalFormState[1].images.map(
                  (item: any) => item.url
                ),
                pictures: defaultModalFormState[1].images.map(
                  (item: any) => item.url
                ),
                video: defaultModalFormState[1].video,
              },
            ].concat(drawerFormState.dynamics);
            fetchList();
          }

          if (operateType.value === "update" || operateType.value === "add") {
            drawerFormState.userDynamics = [
              {
                id: defaultModalFormState[1].uid,
                auth: defaultModalFormState[1].auth,
                content: defaultModalFormState[1].content,
                location: defaultModalFormState[1].location,
                created_at:
                  defaultModalFormState[1].created_at ||
                  publish_time.value.format("YYYY-MM-DD HH:mm:ss"),
                picture: defaultModalFormState[1].images.map(
                  (item: any) => item.url
                ),
                pictures: defaultModalFormState[1].images.map(
                  (item: any) => item.url
                ),
                video: defaultModalFormState[1].video,
              },
            ].concat(drawerFormState.userDynamics);
            drawerFormState.video = defaultModalFormState[1].video;
            drawerFormState.videoFileid = defaultModalFormState[1].videoFileid;
          }
          drawerFormState.content = defaultModalFormState[1].content;
          drawerFormState.auth = defaultModalFormState[1].auth;
          drawerFormState.position = defaultModalFormState[1].location;
          drawerFormState.content_position_country_code =
            defaultModalFormState[1].content_position_country_code;
          refreshComponent.value = false;
          nextTick(() => (refreshComponent.value = true));
        } catch (error: any) {
          message.error(error.message);
        } finally {
          loading.value = false;
          defaultModalVisible[1].value = false;
        }
      },
    },
    slot: {
      extra_form_item: () => {
        return (
          <>
            <a-col span="12">
              <a-form-item label={$t("table95")} name="video">
                <upload-video
                  v-model={defaultModalFormState[1].video}
                  v-model:fileId={defaultModalFormState[1].videoFileid}
                />
              </a-form-item>
            </a-col>

            <a-col span={24}>
              <a-form-item
                label={$t("table87")}
                name="location"
                rules={[
                  {
                    required: true,
                    message: $t("placeholder38"),
                    trigger: ["change"],
                  },
                ]}
              >
                <a-row justify="start" align="middle" gutter={16}>
                  <a-col span={20}>
                    <a-input
                      readonly
                      style="width: 100%"
                      vModel:value={defaultModalFormState[1].location}
                      placeholder={$t("placeholder38")}
                      onClick={() => {
                        clickPointType.value = 1;
                        clearObjAttr(defaultModalFormState[2]);
                        defaultModalVisible[2].value = true;
                        nextTick(() =>
                          inputSearch(
                            querySelector("." + randomClassName + " input"),
                            handleInput
                          )
                        );
                      }}
                    />
                  </a-col>
                  <a-col span={4}>
                    <a
                      onClick={() => {
                        clickPointType.value = 1;
                        clearObjAttr(defaultModalFormState[2]);
                        defaultModalVisible[2].value = true;
                        nextTick(() => {
                          inputSearch(
                            querySelector("." + randomClassName + " input"),
                            handleInput
                          );
                        });
                      }}
                    >
                      {$t("base.mapSelectPoint")}
                    </a>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item label={$t("table214")} name="created_at">
                <s-date-picker
                  allowClear={false}
                  v-model={publish_time.value}
                  show-time
                  placeholder={$t("placeholder167")}
                  disabledDate={(current: Dayjs) =>
                    current > $dayjs(new Date()).endOf("day")
                  }
                  onChange={(date: Dayjs, dateString: string) =>
                    (defaultModalFormState[1].created_at = date.format(
                      "YYYY-MM-DD HH:mm:ss"
                    ))
                  }
                />
              </a-form-item>
            </a-col>
          </>
        );
      },
    },
    modalList: [
      {
        label: getProxyT("table96"),
        name: "content",
        type: "textarea",
        model: "content",
        placeholder: getProxyT("placeholder50"),
        rows: 4,
        showCount: true,
        maxlength: 200,
        isNotLimitCharts: true,
        rules: [
          {
            required: true,
            message: getProxyT("placeholder50"),
          },
        ],
      },
      {
        label: getProxyT("table97"),
        name: "auth",
        options: userPowerMap,
        type: "select",
        model: "auth",
        placeholder: getProxyT("placeholder51"),
        rules: [
          {
            required: true,
            message: getProxyT("placeholder51"),
          },
        ],
      },
      {
        type: "upload",
        label: getProxyT("table98"),
        title: getProxyT("table99"),
        name: "fileList",
        model: "fileList",
        listType: "picture",
        maxCount: 9,
        multiple: true,
        disabled: disabled,
        accept: "image/*",
        on: {
          remove(file: any) {
            try {
              const formState = defaultModalFormState[1];
              const image_index = formState.images.findIndex(
                (item: any) => file.uid === item.uid
              );
              if (image_index >= 0) {
                formState.images.splice(image_index, 1);
                drawerFormState.images.splice(image_index, 1);
              }
              const file_index = formState.fileList.findIndex(
                (item: any) => file.uid === item.uid
              );
              if (file_index >= 0) formState.fileList.splice(file_index, 1);
            } catch (error: any) {
              message.error(error.message);
            } finally {
            }
          },
          async change({ file, fileList }: any) {
            try {
              const formState = defaultModalFormState[1];
              const formData = new FormData();
              formData.append("avatar", file);
              const res: any = await userApi.uploadAvatar(formData);
              if (res.code != 200) return message.error(res.message);
              if (formState.images.length <= 8)
                formState.images?.push({
                  url: res.data.img_url,
                  uid: file.uid,
                });
              if (drawerFormState.images.length <= 8)
                drawerFormState.images?.push(res.data.img_url);
              message.success(res.message);
            } catch (error: any) {
              message.error(error.message);
            }
          },
        },
        event: {
          beforeUpload: (file: any) => false,
        },
      },
    ],
  };
  return defineModalConfig;
};
